<template>
	<view class="bgView">
		<map
			id="clockMapId"
			style="width: 100%; height: 750upx;"
			:latitude="location.latitude"
			:longitude="location.longitude"
			:controls="mapControls"
			:markers="covers"
			polyline="polyline"
		></map>
		<view class="timeSys">打卡时间：{{ systemDate }}</view>
		<view class="address">{{ address }}</view>
		<view class="lineH20"></view>
		<button type="primary" @click="dakaButton">设置打卡位置</button>
		<button type="primary" @click="getLocation">重新定位</button>
	</view>
</template>

<script>
import amap from '../../../common/amap-wx.js';

export default {
	data() {
		return {
			mapControls: [
				{
					id: 2,
					position: {
						left: 160,
						top: 160,
						width: 30,
						height: 35
					},
					iconPath: '../../../static/img/location.png'
				}
			],
			location: {
				location: 43.81,
				longitude: 125.81
			},
			covers: {},
			systemDate: '',
			address: '获取当前位置',

			amapPlugin: null,
			mapKey: 'fbb5ddc12d6183eba23f27639f49757a'
		};
	},
	onLoad() {
		let that = this;
		this.$http.get('ac/xagrid/appSystemService/getCurrentDate').then(res => {
			this.systemDate = res.data.formatDate;
		});

		this.amapPlugin = new amap.AMapWX({
			key: this.mapKey
		});
		this.getLocation();

		uni.showToast({
			icon: 'none',
			title: '未设置打卡位置'
		});
		uni.getSystemInfo({
			success: function(data) {
				var height = data.windowHeight;
				var width = data.screenWidth;
				that.screenWidth = data.screenWidth;
				that.mapControls[0].position.left = width / 2;
				that.mapControls[0].position.top = 750 / 4 + 20;
				console.log('屏幕宽度' + width + 'ScreenWidth' + JSON.stringify(data));
			}
		});
	},
	methods: {
		getLocation() {
			var that = this;
			uni.getLocation({
				type: 'gcj02',
				success: res => {
					console.log(res.longitude, res.latitude);
					this.location = {
						longitude: res.longitude,
						latitude: res.latitude
					};
				}
			});
		},
		dakaButton() {
			let _this = this;
			let mapContext = uni.createMapContext('clockMapId', this);
			mapContext.getCenterLocation({
				success(res) {
					console.log(res.longitude, res.latitude);
					let point = new plus.maps.Point(res.longitude, res.latitude);
					plus.maps.Map.reverseGeocode(
						point,
						{},
						function(event) {
							let address = event.address; // 转换后的地理位置
							let point = event.coord; // 转换后的坐标信息
							let coordType = event.coordType; // 转换后的坐标系类型
							console.log(address, 'address');
							let reg = /.+?(省|市|自治区|自治州|县|区)/g;

							_this.addressList = address
								.match(reg)
								.toString()
								.split(',');
							_this.address = address;
							_this.setLocation(res.latitude, res.longitude, address);
							//console.log(_this.addressList[0]);
							//console.log(_this.addressList[1]);
							//console.log(_this.addressList[2]);
						},
						function(e) {}
					);
				}
			});
		},
		setLocation(latitude, longitude, address) {
			this.$http
				.post('ac/xagrid/appAttenceService/setPunchAddress', {
					latitude: latitude,
					longitude: longitude,
					address: address
				})
				.then(res => {
					if (res.errcode === '0') {
						uni.showModal({
							title: '提示',
							content: '提交成功，请等待审核后再打卡',
							showCancel: false,
							complete() {
								uni.navigateBack({});
							}
						});
					} else {
						uni.showModal({
							title: '提示',
							content: res.errmsg,
							complete() {
								uni.navigateBack({});
							}
						});
					}
				});
		}
	}
};
</script>

<style>
.bgView {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.lineH20 {
	height: 20upx;
	width: 100%;
	background-color: #f7f7f7;
}

map {
	width: 100%;
	height: 450upx;
}

.timeSys {
	margin: 20upx;
}

button {
	margin: 30upx;
}

.address {
	margin: 20upx;
	width: 100%;
}
</style>
